<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
    <style>
        .swiper {
            width: 800px;
            height: 525px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="head">
        <img src="../images/logo.png">
        <span class="nodrop">熊猫优选</span>
        <div class="right">
            <input type="text" value="&nbsp;&nbsp;&nbsp;搜索你感兴趣的内容吧">
            <input type="submit" value="搜索">
            <div class="all">
                <div class="one"> <span class="iconfont icon-tianmaobaoyouqia"></span>
                    <span>全场包邮</span>
                </div>

                <div><span class="iconfont icon-tianmaoqitiantuihuo"></span>
                    <span>品质保证</span>
                </div>
                <div> <span class="iconfont icon-pinzhibaozhengQuality
                "></span>
                    <span>无理由退换</span>
                </div>

            </div>
        </div>
        
        <div class="headimg">
            <img src="../images/headimg.jpg">
            <span>阿尭&nbsp;&nbsp;&nbsp;<a href="../html/login.html">退出登录</a></span>
            
        </div> 
       
        </div>
    </div>

    <!-- 导航  -->
    <div id="nav">

        <ul>
            <li>
                <a href="index.html" class="drop">首页</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                        <ul class="simple">
                            <li><a href="">今日上新</a></li>
                            <li><a href="">特价优惠</a></li>
                            <li><a href="">限时抢购</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="" class="drop">9.9包邮</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                        <ul class="simple">
                            <li><a href="">1.9元封顶</a></li>
                            <li><a href="">4.9元封顶</a></li>
                            <li><a href="">9.9元封顶</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="" class="drop">大牌清仓</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                        <ul class="simple">
                            <li><a href="">买一送一</a></li>
                            <li><a href="">100%正品</a></li>
                            <li><a href="">全部商品</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="" class="drop">捡漏王</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                        <ul class="simple">
                            <li><a href="">假一赔十</a></li>
                            <li><a href="">商城同款</a></li>
                            <li><a href="">当季新品</a></li>
                        </ul>
                    </div>
                </div>
            </li>

            <li>
                <a href="" class="drop">跟着好评买</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                        <ul class="simple">
                            <li><a href="">质量保证</a></li>
                            <li><a href="">好看便宜不踩坑</a></li>
                            <li><a href="">精选系列</a></li>
                        </ul>
                    </div>
                </div>
            </li>

            <li>
                <a href="" class="drop">熊猫精灵</a>
                <div class="dropdown_1column">
                    <div class="col_1">
                        <ul class="simple">
                            <li><a href="">熊猫设计系列</a></li>
                            <li><a href="">萌软直击心灵</a></li>
                            <li><a href="">小朋友们的最爱</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 菜单 -->
    <div id="menu">
        <ul>
            <li><a href="../html/index2.html"><span class="iconfont icon-nvzhuang"></span>女装/女鞋</a></li>
            <li><a href="../html/index2.html"><span class="iconfont icon-nanxie"></span>男装/男鞋</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-meizhuang"></span>美妆/个护</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-suitcase"></span>配饰/箱包</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-lingshi"></span>零食王国</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-muying"></span>母婴用品</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-shouji"></span>手机/数码</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-neiyi"></span>内衣袜子</a></li>
            <li> <a href="../html/index2.html"><span class="iconfont icon-shafa"></span>文娱/家具</a></li>
        </ul>

        <script src="../swiper/swiper-bundle.min.js"></script>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img
                        src="https://7761-warmteldb-38a24d-1259247895.tcb.qcloud.la/foodapp/1585016284206.png?sign=12eb40885b6ac5f9f8b6e8dc123456fa&t=1585019496">
                </div>
                <div class="swiper-slide"><img
                        src="https://img2.baidu.com/it/u=717979571,3244631707&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400">
                </div>
                <div class="swiper-slide"><img
                        src="https://img1.baidu.com/it/u=1733684228,4177721799&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>

            <script>
                var mySwiper = new Swiper('.swiper', {
                    direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',

                    },
                })        
            </script>


        </div>

        <div class="right">
            <p>9块9包邮</p>
            <p>保你不吃亏</p>
            <img src="../images/banner.gif" alt="">
        </div>

    </div>

    <div id="chooise">
        <span>小编精选</span>
        <span>每天更新</span>
    </div>
    <div id="content">
        <!-- 动态渲染商品 -->
    </div>
    <div class="more">
        <button>加载更多</button>
    </div>
    <!-- 回到顶部 -->
    <div class="goTop">回到顶部</div>

    <!-- 页脚 -->
    <div id="footer">
       <img src="../images/logo.png">
       <span>熊猫优选欢迎您！</span>
    </div>


        <script src="../js/axios.min.js"></script>
        <script src="../js/myajax.js"></script>
        <script src="../js/cookie.js"></script>
        <script src="../js/index.js"></script>

</body>

</html>